import React, { Component } from 'react'
import {
    View,
    StyleSheet,
    Image,
    Text,
    TextInput,
    TouchableOpacity,
} from 'react-native'
import Input from '../pages/Chat/Input';

export default class BottomFunctionBar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            microphoneDefaultBtn: false, // 语音按钮显示默认值
            expressionIconDefaultBtn: false, // 表情按钮显示默认值
            expressionIconDefaultBtn: false, // 表情包切换键盘图标默认值
            deleteIconDefaultBtn: false, // 更多功能按钮显示默认值
            microphoneDefaultFn: false, // 语音功能默认值
            microphoneDefaultTime: false, // 语音时长
            btntFnDefaultDeleteGray: false, // 灰色取消按钮
            microphoneBtnDeleteGray: false, // 语音取消按钮
            microphoneBtnDeleteRed: false, // 语音取消发送按钮
            microphoneStyleBox: styles.microphoneStyleBox, // 语音模块样式
            expressionStyleBox: styles.expressionStyleBox, // 表情模块样式
            deleteionStyleBox: styles.deleteionStyleBox, // 更多功能模块样式

            // 资源数据
            deleteGray: require('../assets/images/iconResources/deleteGray.png'),
            deleteRed: require('../assets/images/iconResources/deleteRed.png'),
            keyboardIcon: require("../assets/images/iconResources/keyboardIcon.png"),
            microphone: require("../assets/images/iconResources/Microphone.png"),
            expression: require("../assets/images/iconResources/expression.png"),
            deleteImg: require("../assets/images/iconResources/delete.png"),
            addTo: require("../assets/images/iconResources/addTo.png"),
            rectangleDefaut: require('../assets/images/iconResources/RectangleDefaut.png'),
            rectangleGery: require('../assets/images/iconResources/RectangleGery.png'),
            rectangleRed: require('../assets/images/iconResources/RectangleRed.png'),
            microphoneIconImg: require('../assets/images/iconResources/MicrophoneIcon.png'),

            // 更多功能列表数据
            moreFeatures: [
                {
                    icon: require('../assets/images/iconResources/picture.png'), // 图标
                    nameIcon: "图片", // 功能名称
                    url: 'recentAlbum' // 需跳转的页面
                },
                {
                    icon: require('../assets/images/iconResources/shot.png'),
                    nameIcon: "拍摄",
                    url: ''
                },
                {
                    icon: require('../assets/images/iconResources/voice.png'),
                    nameIcon: "语音",
                    url: 'voice'
                },
                {
                    icon: require('../assets/images/iconResources/video.png'),
                    nameIcon: "视频",
                    url: 'video'
                },
                {
                    icon: require('../assets/images/iconResources/notice.png'),
                    nameIcon: "通知",
                    url: 'notice'
                },
                {
                    icon: require('../assets/images/iconResources/file.png'),
                    nameIcon: "文件",
                    url: 'filePage'
                },
                {
                    icon: require('../assets/images/iconResources/location.png'),
                    nameIcon: "定位",
                    url: 'location'
                },
                {
                    icon: require('../assets/images/iconResources/businessCard.png'),
                    nameIcon: "名片",
                    url: ''
                },
            ],
            message: ''
        };
    }

    componentDidMount = () => { }

    // 语音icon按钮点击事件
    onMicrophoneBox = () => {
        const {
            microphoneDefaultBtn
        } = this.state
        !microphoneDefaultBtn ?
            this.setState({
                microphoneDefaultBtn: true
            }) :
            this.setState({
                microphoneDefaultBtn: false
            })
        this.setState({
            expressionIconDefaultBtn: false
        })
        this.setState({
            deleteIconDefaultBtn: false
        })
    }

    // 语音实现功能区
    onMicrophoneBtntFn = () => {
        const {
            microphoneDefaultFn,
            microphoneDefaultTime,
            btntFnDefaultDeleteGray
        } = this.state
        !microphoneDefaultFn ?
            this.setState({
                microphoneDefaultFn: true
            }) :
            this.setState({
                microphoneDefaultFn: false
            })
        !microphoneDefaultTime ?
            this.setState({
                microphoneDefaultTime: true
            }) :
            this.setState({
                microphoneDefaultTime: false
            })
        !btntFnDefaultDeleteGray ?
            this.setState({
                btntFnDefaultDeleteGray: true
            }) :
            this.setState({
                btntFnDefaultDeleteGray: false
            })
        this.setState({
            microphoneBtnDeleteGray: false
        })
    }

    // 灰色提示取消按钮
    onMicrophoneBtnGray = () => {
        const {
            microphoneBtnDeleteGray
        } = this.state
        !microphoneBtnDeleteGray ?
            this.setState({
                microphoneBtnDeleteGray: true
            }) :
            this.setState({
                microphoneBtnDeleteGray: false
            })
        this.setState({
            microphoneDefaultTime: false
        })
        this.setState({
            btntFnDefaultDeleteGray: false
        })
    }

    // 判断灰色 取消提示按钮
    btntFnDefaultDeleteGray = () => {
        const {
            deleteGray,
            btntFnDefaultDeleteGray
        } = this.state
        if (btntFnDefaultDeleteGray) {
            return (
                <Image
                    style={styles.btnDelete}
                    source={deleteGray}
                />
            )
        }
    }

    // 判断红色取消按钮
    microphoneBtnDeleteGray = () => {
        const {
            deleteRed,
            microphoneBtnDeleteGray
        } = this.state
        if (microphoneBtnDeleteGray) {
            return (
                <Image
                    style={styles.btnDelete}
                    source={deleteRed}
                />
            )
        }
    }

    // 红色取消按钮
    onPressMicrophoneBtnRed = () => {
        this.setState({
            microphoneDefaultFn: false
        })
        this.setState({
            microphoneBtnDeleteGray: false
        })
    }

    // 表情按钮点击事件
    onPressExpressionBox = () => {
        const {
            expressionIconDefaultBtn
        } = this.state
        !expressionIconDefaultBtn ?
            this.setState({
                expressionIconDefaultBtn: true
            }) :
            this.setState({
                expressionIconDefaultBtn: false
            })
        this.setState({
            microphoneDefaultBtn: false
        })
        this.setState({
            deleteIconDefaultBtn: false
        })
    }

    // 更多功能按钮点击事件
    onPressDeleteIconBox = () => {
        const {
            deleteIconDefaultBtn
        } = this.state
        !deleteIconDefaultBtn ?
            this.setState({
                deleteIconDefaultBtn: true
            }) :
            this.setState({
                deleteIconDefaultBtn: false
            })
        this.setState({
            microphoneDefaultBtn: false
        })
        this.setState({
            expressionIconDefaultBtn: false
        })
    }

    // 输入框在焦点状态
    onFocusInput = () => {
        this.setState({
            deleteIconDefaultBtn: false
        })
        this.setState({
            microphoneDefaultBtn: false
        })
        this.setState({
            expressionIconDefaultBtn: false
        })
    }

    // 点击键盘按钮后自动获取输入框焦点
    onFocusAutomatic = () => { }
    handleSubmit() {
        if (this.state.message === '') {
            return;
        }
        console.log('@@@@@@@@@@@@@@@');


        const id = addSelfMessage('text', message);
        sendMessage(id, 'text', message);

        setMessage('');
        toggleShowFunctionList(true);
        toggleShowExpression(false);
        setInputText();
    }
    render() {
        const {
            meesagePagethis
        } = this.props
        const {
            moreFeatures,
            keyboardIcon,
            microphone,
            expression,
            addTo,
            deleteImg,
            rectangleDefaut,
            rectangleGery,
            rectangleRed,
            microphoneIconImg,
            microphoneDefaultBtn,
            expressionIconDefaultBtn,
            deleteIconDefaultBtn,
            microphoneDefaultFn,
            microphoneDefaultTime,
            microphoneStyleBox,
            microphoneBtnDeleteGray,
            expressionStyleBox,
            deleteionStyleBox,
        } = this.state

        // 语音按钮
        const MicrophoneIcon =
            microphoneDefaultBtn ?
                <Image style={styles.SystemPromptLeft}
                    source={keyboardIcon} /> :
                <Image style={styles.SystemPromptLeft}
                    source={microphone} />

        // 消息发送输入框
        const TextInputBox =
            // <TextInput
            //     onFocus={() => {
            //         this.onFocusInput()
            //     }}
            //     onSubmitEditing={
            //         this.handleSubmit()
            //     }
            //     placeholder='发消息....'
            //     style={styles.inputStyle}
            // />
            <Input />

        // 表情按钮                      
        const ExpressionIcon =
            expressionIconDefaultBtn ?
                <Image style={styles.SystemPromptLeft}
                    source={keyboardIcon} /> :
                <Image style={styles.SystemPromptLeft}
                    source={expression} />

        // 更多功能按钮
        const DeleteIcon =
            !deleteIconDefaultBtn ?
                <Image style={styles.SystemPromptLeft}
                    source={addTo} /> :
                <Image style={styles.SystemPromptLeft}
                    source={deleteImg} />


        // 语音模块
        const MicrophoneStyleBox =
            microphoneDefaultBtn ?
                <View style={microphoneStyleBox}>
                    {/* 文字提示区 */}
                    <View>
                        {!microphoneDefaultFn ?
                            <Text style={styles.StatusPromptText}>按住说话</Text> : null}
                        {microphoneDefaultTime ?
                            <View style={styles.row}>
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleGery} />
                                <Text style={styles.StatusPromptTextTime}>0:00</Text>
                                <Image style={styles.iconSpacingRight} source={rectangleGery} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                            </View> : null
                        }
                        {microphoneBtnDeleteGray ?
                            <View style={styles.row}>
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingLeft} source={rectangleRed} />
                                <Text style={styles.StatusPromptTextDelet}>松手取消发送</Text>
                                <Image style={styles.iconSpacingRight} source={rectangleRed} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                                <Image style={styles.iconSpacingRight} source={rectangleDefaut} />
                            </View> : null
                        }
                    </View>

                    {/* 语音功能区 */}
                    <View style={styles.microphoneWarper}>
                        <TouchableOpacity onPress={() => {
                            this.onMicrophoneBtntFn()
                        }}>
                            <View style={styles.microphoneIconBg}>
                                <Image
                                    style={styles.microphoneIconStyle}
                                    source={microphoneIconImg}
                                />
                            </View>
                        </TouchableOpacity>
                        <View style={styles.cancelBtn}>
                            <TouchableOpacity onPress={() => {
                                this.onMicrophoneBtnGray()
                            }}>
                                <View>
                                    {
                                        this.btntFnDefaultDeleteGray()
                                    }
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => {
                                this.onPressMicrophoneBtnRed()
                            }}>
                                <View>
                                    {
                                        this.microphoneBtnDeleteGray()
                                    }
                                </View>
                            </TouchableOpacity>
                        </View>

                    </View>
                </View> : null

        // 表情包模块
        const ExpressionStyleBox =
            expressionIconDefaultBtn ?
                <View style={expressionStyleBox}>

                </View> : null

        // 更多功能模块
        const DeleteionStyleBox =
            deleteIconDefaultBtn ?
                <View style={deleteionStyleBox}>
                    {moreFeatures.map((item, index) => (
                        <TouchableOpacity key={index}
                            onPress={() => {
                                meesagePagethis.props.navigation.push(
                                    item.url,
                                    { id: 1 }
                                )
                            }}>
                            <View style={styles.rowItem}
                                key={index}>
                                <Image style={styles.functionPicture}
                                    source={item.icon} />
                                <Text style={styles.TextItem}>
                                    {item.nameIcon}
                                </Text>
                            </View>
                        </TouchableOpacity>
                    ))}
                </View> : null

        return (
            <View style={styles.Box}>
                <View style={styles.bottomBox}>
                    <TouchableOpacity
                        onPress={() => {
                            this.onMicrophoneBox()
                        }}>
                        {/* 语音按钮 */}
                        {MicrophoneIcon}
                    </TouchableOpacity>

                    {/* 消息发送输入框 */}
                    {TextInputBox}

                    <TouchableOpacity
                        onPress={() => {
                            this.onPressExpressionBox()
                        }}>
                        {/* 表情按钮 */}
                        {ExpressionIcon}
                    </TouchableOpacity>

                    <TouchableOpacity
                        onPress={() => {
                            this.onPressDeleteIconBox()
                        }}>
                        {/* 更多功能按钮 */}
                        {DeleteIcon}
                    </TouchableOpacity>
                </View>

                {/* 语音模块 */}
                {MicrophoneStyleBox}
                {/* 表情模块 */}
                {ExpressionStyleBox}
                {/* 更多功能模块 */}
                {DeleteionStyleBox}
            </View >
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 32,
        backgroundColor: 'transparent'
    },
    Box: {
        flex: 1,
        backgroundColor: "#fff",
        position: "absolute",
        bottom: 0,
        width: "100%"
    },
    bottomBox: {
        flexDirection: "row",
        justifyContent: "space-between",
        paddingTop: 10,
        paddingRight: 15,
        paddingLeft: 15,
        paddingBottom: 10,
        alignItems: "center",

    },
    inputStyle: {
        width: 270,
        paddingLeft: 15,
        borderRadius: 5,
        backgroundColor: "#eaeaea",
        height: 35,
        fontSize: 12,
    },
    // 语音模块样式
    microphoneStyleBox: {
        height: 230,
        flexDirection: "column",
        justifyContent: "space-evenly",
        alignItems: "center",
    },

    StatusPromptText: {
        fontSize: 15,
        color: "#949494"
    },
    StatusPromptTextTime: {
        fontSize: 15,
        color: "#333",
        marginLeft: 10,
        marginRight: 10
    },
    row: {
        flexDirection: "row",
        alignItems: "center"
    },
    iconSpacingLeft: {
        marginLeft: 5
    },
    iconSpacingRight: {
        marginRight: 5
    },
    StatusPromptTextDelet: {
        fontSize: 15,
        color: "#ff3636",
        marginLeft: 10,
        marginRight: 10
    },
    microphoneWarper: {
        position: "relative",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        width: "80%"
    },
    microphoneIconBg: {
        width: 85,
        height: 85,
        backgroundColor: "#63B4FF",
        borderRadius: 55,
        justifyContent: "center",
        alignItems: "center",
    },
    cancelBtn: {
        position: "absolute",
        top: "25%",
        right: "15%"
    },
    microphoneIconStyle: {
        width: 40,
        height: 40
    },

    btnDelete: {
        width: 40,
        height: 40
    },

    // 表情包模块样式
    expressionStyleBox: {
        height: 230,
        backgroundColor: "pink"
    },
    // 更多功能模块样式
    deleteionStyleBox: {
        height: 230,
        flexDirection: "row",
        flexWrap: "wrap",
        justifyContent: "space-between",
        paddingLeft: 40,
        paddingRight: 40,
        paddingTop: 20,
    },
    rowItem: {
        flexDirection: "column",
        alignItems: "center",
        width: 70,
        flex: 0,
        marginBottom: 20,
    },
    functionPicture: {
        width: 45,
        height: 45,
        marginBottom: 10
    },
    TextItem: {
        fontSize: 13,
        color: "#666"
    }
})